
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont">&#xe628;</i>
                    <div class="name">iconfont-xingxing</div>
                    <div class="code">&amp;#xe628;</div>
                    <div class="fontclass">.iconfontxingxing</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe61f;</i>
                    <div class="name">wxb主页</div>
                    <div class="code">&amp;#xe61f;</div>
                    <div class="fontclass">.wxbzhuye</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe620;</i>
                    <div class="name">wxb搜索推广</div>
                    <div class="code">&amp;#xe620;</div>
                    <div class="fontclass">.wxbsousuotuiguang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe619;</i>
                    <div class="name">回到顶部</div>
                    <div class="code">&amp;#xe619;</div>
                    <div class="fontclass">.huidaodingbu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe61a;</i>
                    <div class="name">浏览</div>
                    <div class="code">&amp;#xe61a;</div>
                    <div class="fontclass">.liulan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe61c;</i>
                    <div class="name">删除 (3)</div>
                    <div class="code">&amp;#xe61c;</div>
                    <div class="fontclass">.shanchu3</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe61e;</i>
                    <div class="name">删除</div>
                    <div class="code">&amp;#xe61e;</div>
                    <div class="fontclass">.shanchu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe615;</i>
                    <div class="name">设置</div>
                    <div class="code">&amp;#xe615;</div>
                    <div class="fontclass">.icon_setting</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe614;</i>
                    <div class="name">查找</div>
                    <div class="code">&amp;#xe614;</div>
                    <div class="fontclass">.icon_search</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe620;</i>
                    <div class="name">我的消息icon</div>
                    <div class="code">&amp;#xe620;</div>
                    <div class="fontclass">.wodexiaoxiicon</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe603;</i>
                    <div class="name">收藏</div>
                    <div class="code">&amp;#xe603;</div>
                    <div class="fontclass">.icon_collect</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe604;</i>
                    <div class="name">已收藏</div>
                    <div class="code">&amp;#xe604;</div>
                    <div class="fontclass">.icon_collect_selected</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe616;</i>
                    <div class="name">赞</div>
                    <div class="code">&amp;#xe616;</div>
                    <div class="fontclass">.icon_good</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe617;</i>
                    <div class="name">已赞</div>
                    <div class="code">&amp;#xe617;</div>
                    <div class="fontclass">.icon_goodfill</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe608;</i>
                    <div class="name">分享</div>
                    <div class="code">&amp;#xe608;</div>
                    <div class="fontclass">.icon_share</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60e;</i>
                    <div class="name">箭头_上</div>
                    <div class="code">&amp;#xe60e;</div>
                    <div class="fontclass">.icon_arrow_top</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60d;</i>
                    <div class="name">箭头_右</div>
                    <div class="code">&amp;#xe60d;</div>
                    <div class="fontclass">.icon_arrow_right</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60c;</i>
                    <div class="name">箭头_左</div>
                    <div class="code">&amp;#xe60c;</div>
                    <div class="fontclass">.icon_arrow_left</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe601;</i>
                    <div class="name">箭头_下</div>
                    <div class="code">&amp;#xe601;</div>
                    <div class="fontclass">.icon_arrow_bottom</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe607;</i>
                    <div class="name">个人中心</div>
                    <div class="code">&amp;#xe607;</div>
                    <div class="fontclass">.icon_pc</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe610;</i>
                    <div class="name">修改</div>
                    <div class="code">&amp;#xe610;</div>
                    <div class="fontclass">.icon_edit</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe620;</i>
                    <div class="name">访客</div>
                    <div class="code">&amp;#xe620;</div>
                    <div class="fontclass">.fangke</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6ff;</i>
                    <div class="name">返回</div>
                    <div class="code">&amp;#xe6ff;</div>
                    <div class="fontclass">.fanhui</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6ca;</i>
                    <div class="name">首页_fill</div>
                    <div class="code">&amp;#xe6ca;</div>
                    <div class="fontclass">.shouyefill</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6cb;</i>
                    <div class="name">首页</div>
                    <div class="code">&amp;#xe6cb;</div>
                    <div class="fontclass">.shouye</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6ad;</i>
                    <div class="name">评论</div>
                    <div class="code">&amp;#xe6ad;</div>
                    <div class="fontclass">.pinglun</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7b3;</i>
                    <div class="name">好友</div>
                    <div class="code">&amp;#xe7b3;</div>
                    <div class="fontclass">.haoyou</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe61c;</i>
                    <div class="name">好友</div>
                    <div class="code">&amp;#xe61c;</div>
                    <div class="fontclass">.haoyou1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0066;</i>
                    <div class="name">音乐</div>
                    <div class="code">&amp;#xf0066;</div>
                    <div class="fontclass">.yinle</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe651;</i>
                    <div class="name">音乐</div>
                    <div class="code">&amp;#xe651;</div>
                    <div class="fontclass">.music</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe66e;</i>
                    <div class="name">音乐</div>
                    <div class="code">&amp;#xe66e;</div>
                    <div class="fontclass">.yinyue</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6ad;</i>
                    <div class="name">音乐</div>
                    <div class="code">&amp;#xe6ad;</div>
                    <div class="fontclass">.yinle1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe697;</i>
                    <div class="name">音乐</div>
                    <div class="code">&amp;#xe697;</div>
                    <div class="fontclass">.yinle2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6b7;</i>
                    <div class="name">音乐</div>
                    <div class="code">&amp;#xe6b7;</div>
                    <div class="fontclass">.yinle3</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe615;</i>
                    <div class="name">循环播放</div>
                    <div class="code">&amp;#xe615;</div>
                    <div class="fontclass">.ttpodicon</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0030;</i>
                    <div class="name">单曲循环</div>
                    <div class="code">&amp;#xf0030;</div>
                    <div class="fontclass">.danquxunhuan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe601;</i>
                    <div class="name">随机播放</div>
                    <div class="code">&amp;#xe601;</div>
                    <div class="fontclass">.suijibofang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6f1;</i>
                    <div class="name">随机播放</div>
                    <div class="code">&amp;#xe6f1;</div>
                    <div class="fontclass">.suijibofang1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe65d;</i>
                    <div class="name">播放</div>
                    <div class="code">&amp;#xe65d;</div>
                    <div class="fontclass">.iconfontbofang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe628;</i>
                    <div class="name">播放</div>
                    <div class="code">&amp;#xe628;</div>
                    <div class="fontclass">.bofang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0058;</i>
                    <div class="name">播放</div>
                    <div class="code">&amp;#xf0058;</div>
                    <div class="fontclass">.listbtnorangeplayselect2x</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe602;</i>
                    <div class="name">暂停</div>
                    <div class="code">&amp;#xe602;</div>
                    <div class="fontclass">.pause</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe682;</i>
                    <div class="name">暂停</div>
                    <div class="code">&amp;#xe682;</div>
                    <div class="fontclass">.zanting</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe617;</i>
                    <div class="name">暂停</div>
                    <div class="code">&amp;#xe617;</div>
                    <div class="fontclass">.zanting1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe607;</i>
                    <div class="name">下一首</div>
                    <div class="code">&amp;#xe607;</div>
                    <div class="fontclass">.shangyishou</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6c8;</i>
                    <div class="name">下一首</div>
                    <div class="code">&amp;#xe6c8;</div>
                    <div class="fontclass">.xiayishou</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6c9;</i>
                    <div class="name">上一首</div>
                    <div class="code">&amp;#xe6c9;</div>
                    <div class="fontclass">.shangyishou1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe627;</i>
                    <div class="name">下一首</div>
                    <div class="code">&amp;#xe627;</div>
                    <div class="fontclass">.xiayishou1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xf0072;</i>
                    <div class="name">上一页</div>
                    <div class="code">&amp;#xf0072;</div>
                    <div class="fontclass">.shangyiye</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe617;</i>
                    <div class="name">下一页</div>
                    <div class="code">&amp;#xe617;</div>
                    <div class="fontclass">.xiayiye</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe638;</i>
                    <div class="name">声音</div>
                    <div class="code">&amp;#xe638;</div>
                    <div class="fontclass">.shengyin</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe622;</i>
                    <div class="name">声音</div>
                    <div class="code">&amp;#xe622;</div>
                    <div class="fontclass">.shengyin1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe769;</i>
                    <div class="name">歌词调整</div>
                    <div class="code">&amp;#xe769;</div>
                    <div class="fontclass">.gecidiaozheng</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6e0;</i>
                    <div class="name">词</div>
                    <div class="code">&amp;#xe6e0;</div>
                    <div class="fontclass">.ci</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe619;</i>
                    <div class="name">歌手</div>
                    <div class="code">&amp;#xe619;</div>
                    <div class="fontclass">.geshou</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe7f0;</i>
                    <div class="name">歌曲保存</div>
                    <div class="code">&amp;#xe7f0;</div>
                    <div class="fontclass">.gequbaocun</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe671;</i>
                    <div class="name">歌曲名</div>
                    <div class="code">&amp;#xe671;</div>
                    <div class="fontclass">.gequming</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe644;</i>
                    <div class="name">添加歌曲</div>
                    <div class="code">&amp;#xe644;</div>
                    <div class="fontclass">.tianjiagequ</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe668;</i>
                    <div class="name">歌曲下载</div>
                    <div class="code">&amp;#xe668;</div>
                    <div class="fontclass">.gequxiazai</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6a2;</i>
                    <div class="name">歌曲信息</div>
                    <div class="code">&amp;#xe6a2;</div>
                    <div class="fontclass">.ttpodicon1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe613;</i>
                    <div class="name">分类</div>
                    <div class="code">&amp;#xe613;</div>
                    <div class="fontclass">.fenlei</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe687;</i>
                    <div class="name">分类</div>
                    <div class="code">&amp;#xe687;</div>
                    <div class="fontclass">.fenlei1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe68b;</i>
                    <div class="name">推荐</div>
                    <div class="code">&amp;#xe68b;</div>
                    <div class="fontclass">.tuijian</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60b;</i>
                    <div class="name">排行榜</div>
                    <div class="code">&amp;#xe60b;</div>
                    <div class="fontclass">.icon2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe603;</i>
                    <div class="name">排行榜</div>
                    <div class="code">&amp;#xe603;</div>
                    <div class="fontclass">.paixingbang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe639;</i>
                    <div class="name">浏览</div>
                    <div class="code">&amp;#xe639;</div>
                    <div class="fontclass">.liulan1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6cc;</i>
                    <div class="name">浏览</div>
                    <div class="code">&amp;#xe6cc;</div>
                    <div class="fontclass">.liulan2</div>
                </li>
            
        </ul>


        <div class="helps">
            第一步：使用font-face声明字体
            <pre>
@font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
</pre>
第二步：定义使用iconfont的样式
            <pre>
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
</pre>
第三步：挑选相应图标并获取字体编码，应用于页面
<pre>
&lt;i class="iconfont"&gt;&amp;#x33;&lt;/i&gt;
</pre>
        </div>

    </div>
</body>
</html>
